<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1.计算机网络 | Electrolux_blog</title>
    <meta name="description" content="hello world">
    <link rel="preload stylesheet" href="/front-base-know-blog/assets/style.4f9339b2.css" as="style">
    <script type="module" src="/front-base-know-blog/assets/app.b7849f6a.js"></script>
    <link rel="preload" href="/front-base-know-blog/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/framework.408c4d71.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/theme.bf7db135.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/know_计算机基础_1计算机网络.md.5d905f95.lean.js">
  <link rel="icon" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <script>import("/front-base-know-blog/_pagefind/pagefind.js").then(n=>{window.__pagefind__=n}).catch(()=>{console.log("not load /_pagefind/pagefind.js")});</script>
  </head>
  <body><!--v-if--><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-f0b011de><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8616af1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f0b011de data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-7c10cd25><div class="container" data-v-7c10cd25><div class="title" data-v-7c10cd25><div class="VPNavBarTitle has-sidebar" data-v-7c10cd25 data-v-4d981103><a class="title" href="/front-base-know-blog/" data-v-4d981103><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg" alt data-v-6db2186b><!--]--><!--[-->Electrolux_blog<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-7c10cd25><div class="curtain" data-v-7c10cd25></div><div class="content-body" data-v-7c10cd25><!--[--><!--]--><div class="blog-search search" data-pagefind-ignore="all" data-v-7c10cd25 style="--dba016e0:1;" data-v-e09e7552><div class="nav-search-btn-wait" data-v-e09e7552><svg width="14" height="14" viewBox="0 0 20 20" data-v-e09e7552><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" data-v-e09e7552></path></svg><span class="search-tip" data-v-e09e7552>Search</span><span class="metaKey" data-v-e09e7552> K </span></div><!--teleport start--><!--teleport end--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-7c10cd25 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->首页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/know/know/1html" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端基础<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/supper/supper/1%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端工程化<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/python/flask" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Python<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/java/java" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Java<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/project/javadump%E5%88%86%E6%9E%90" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->项目<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-7c10cd25 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-7c10cd25 data-v-0394ad82 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-7c10cd25 data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-7c10cd25 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-f0b011de data-v-392e1bf8><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-392e1bf8><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-392e1bf8><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-392e1bf8>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-392e1bf8 data-v-079b16a8><button data-v-079b16a8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-f0b011de data-v-af16598e><div class="curtain" data-v-af16598e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af16598e><span class="visually-hidden" id="sidebar-aria-label" data-v-af16598e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>前端基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/1html" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>html(浏览器)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/2javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(1)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/3javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(2)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E6%89%8B%E5%86%99%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 手写题</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 代码输出</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/5javascript-es6" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(4) | es6</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/9javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(5)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/6ts" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>TypeScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/7css" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>CSS</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/8bug" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>BUG</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible has-active" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>计算机基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/1%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>计算机网络</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>框架 | 工具</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/1vue" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/2react" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>react</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/3ssr" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ssr</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/4%E5%BE%AE%E5%89%8D%E7%AB%AF" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>微前端</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/5vue3" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue3</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/6nginx" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>nginx</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/7python" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>python</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/8ffmpeg" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ffmpeg</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/7tensorFlow" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>tensorFlow</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/8mediapipe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>mediapipe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/10aframe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>aframe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/11%E9%80%86%E5%90%91%E6%95%B0%E6%8D%AEcrawl" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>逆向数据crawl</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/12threejs" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>threejs</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/13electron" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/17webpack" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>优化 | 工程</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/1%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%92%8C%E5%AE%89%E5%85%A8" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化和安全</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/3%E7%AE%97%E6%B3%95" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>算法</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/4%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/5npm,%E7%BB%84%E4%BB%B6%E5%BA%93%E6%9E%84%E9%80%A0" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>组件库构造</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/6webrtc" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webrtc</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/9.wasm" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>wasm</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/11.webcomponent" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webcomponent</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/12.pwa" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>pwa</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-pagefind-body data-v-f0b011de data-v-a494bd1d><div class="VPDoc has-sidebar has-aside" data-v-a494bd1d data-v-c4b0d3cf><!--[--><!--]--><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-9a431c33><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><!--[--><!--]--><!----><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _front-base-know-blog_know_%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80_1%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-c4b0d3cf><div><h1 id="_1-计算机网络" tabindex="-1">1.计算机网络 <a class="header-anchor" href="#_1-计算机网络" aria-label="Permalink to &quot;1.计算机网络&quot;">​</a></h1><nav class="table-of-contents"><ul><li><a href="#_1-1-常识">1.1 常识</a><ul><li><a href="#_1-1-1-osi-tcp-ip">1.1.1 osi | tcp/ip</a></li><li><a href="#_1-1-2-cdn">1.1.2 cdn</a></li><li><a href="#_1-1-3-websocket">1.1.3 websocket</a></li><li><a href="#_1-1-4-单工-半双工-全双工">1.1.4 单工 | 半双工 | 全双工？</a></li><li><a href="#_1-1-5-http-1-0-2-0-3-0">1.1.5 http | 1.0 | 2.0 | 3.0</a></li><li><a href="#_1-1-6-tcp">1.1.6 tcp</a></li></ul></li><li><a href="#_1-2-快问快答">1.2 快问快答</a><ul><li><a href="#_1-2-1-http-https-gzip">1.2.1 HTTP | HTTPS | gzip</a></li><li><a href="#_1-2-2-get-post">1.2.2 get post</a></li><li><a href="#_1-2-3-tcp-常问">1.2.3 tcp 常问</a></li><li><a href="#_1-2-4-tcp-机制">1.2.4 tcp 机制</a></li><li><a href="#_1-2-5-其他知识点">1.2.5 其他知识点</a></li></ul></li></ul></nav><h2 id="_1-1-常识" tabindex="-1">1.1 常识 <a class="header-anchor" href="#_1-1-常识" aria-label="Permalink to &quot;1.1 常识&quot;">​</a></h2><h3 id="_1-1-1-osi-tcp-ip" tabindex="-1">1.1.1 osi | tcp/ip <a class="header-anchor" href="#_1-1-1-osi-tcp-ip" aria-label="Permalink to &quot;1.1.1 osi  |  tcp/ip&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">OSI七层协议物理层、数据链路层、网络层（IP）、传输层（TCP和UDP）、会话层、表示层、应用层（HTTP、WebSocket、FTP、DNS）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">TCP</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">IP 5层协议族按层次分为应用层、传输层、网络层和数据链路层 物理层</span></span>
<span class="line"><span style="color:#A6ACCD;">TCP</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">IP协议不仅仅指的是TCP 和IP两个协议，而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇， 只是因为在TCP</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">IP协议中TCP协议和IP协议最具代表性，所以被称为TCP</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">IP协议。</span></span></code></pre></div><h3 id="_1-1-2-cdn" tabindex="-1">1.1.2 cdn <a class="header-anchor" href="#_1-1-2-cdn" aria-label="Permalink to &quot;1.1.2 cdn&quot;">​</a></h3><p>dns解析后，返回全局负载均衡的服务器ip给用户，用户请求这个ip，服务器根据ip返回所在区域的负载均衡服务器ip给用户，负载均衡服务器再找符合用户需求的缓存服务器ip给用户，当没有对应内容就去上一级缓存服务器找，找到后缓存在缓存服务器中，下次请求就快了。</p><h3 id="_1-1-3-websocket" tabindex="-1">1.1.3 websocket <a class="header-anchor" href="#_1-1-3-websocket" aria-label="Permalink to &quot;1.1.3 websocket&quot;">​</a></h3><p>为web客户端和服务端之间提供了一种全双工通信机制，特点是在握手阶段采用http协议，和http一样在tcp基础上同属于应用层协议。websocket不受同源限制，协议的标识符不是http而是ws，如果是加密则为wss。</p><h3 id="_1-1-4-单工-半双工-全双工" tabindex="-1">1.1.4 单工 | 半双工 | 全双工？ <a class="header-anchor" href="#_1-1-4-单工-半双工-全双工" aria-label="Permalink to &quot;1.1.4 单工 | 半双工 | 全双工？&quot;">​</a></h3><p>单工是指只能一方传输例如http1.0，半双工是指允许双向传输但同一时间只能单向传，例如http1.1，全双工是指可以同时双向传，例如websocket和http2.0</p><ol><li>WebSocket和Ajax区别 Ajax是异步JavaScript和XML，是一种创建交互式网页的技术，websocket是HTML5的一种协议，实现了浏览器和服务器的实时通信。从生命周期来看，websocket是长连接，ajax发送接收后就会断开。从发起人来看，ajax是客户端发起，websocket是服务器和客户端相互推送。</li></ol><h3 id="_1-1-5-http-1-0-2-0-3-0" tabindex="-1">1.1.5 http | 1.0 | 2.0 | 3.0 <a class="header-anchor" href="#_1-1-5-http-1-0-2-0-3-0" aria-label="Permalink to &quot;1.1.5 http | 1.0  | 2.0 |  3.0&quot;">​</a></h3><p>http是建立在tcp上面的协议</p><p>多路复用代替原来的序列和阻塞机制，所有就是请求的都是通过一个 TCP 连接完成</p><ol><li>http1.1、http2.0、http3.0</li></ol><table><thead><tr><th style="text-align:center;">http版本</th><th style="text-align:center;">缺点</th><th style="text-align:center;">优点</th></tr></thead><tbody><tr><td style="text-align:center;">1.0</td><td style="text-align:center;">不能长连接 | 请求接收都要阻塞</td><td style="text-align:center;">简单明文</td></tr><tr><td style="text-align:center;">1.1</td><td style="text-align:center;">队头阻塞</td><td style="text-align:center;">长连接 | 管道⽹络传输</td></tr><tr><td style="text-align:center;">2</td><td style="text-align:center;">丢包：多个 HTTP 请求在复⽤⼀个 TCP 连接</td><td style="text-align:center;">全双工 | 优先级 | 多路复⽤ | 压缩头 | 二进制 | HTTPS</td></tr><tr><td style="text-align:center;">3</td><td style="text-align:center;"></td><td style="text-align:center;">协议：QUIC | UDP链接</td></tr></tbody></table><ol><li>http与https http是超文本明文传输，http是无状态的，不会保存请求和响应之间的通信状态（不过http1.1利用cookie可以存一些内容）。https是http和SSL安全套接层或TLS安全传输层协议组合使用的协议。 http明文传输，并且不对通信双方确认，也不能保证数据的完整性。而HTTPS的SSL可以加密并且对通信双方认证以及数据完整性保护（不会轻易在传输过程中被篡改），更加安全。 通常HTTP直接和TCP通信，当使用SSL时，则演变成先和SSL通信，再由SSL和TCP通信了。 https端口一般是443，http端口一般是80。 https因为密码计算和协议交互耗时，所以慢一些。</li><li>https加密过程 加密解密用同一个密钥就是对称加密，如果公钥加密私钥解密那就是非对称加密了，HTTPS二者都有，所以是混合加密。使用非对称加密（比如RSA）交换对称加密（比如AES）要用的密钥，这样就确保对称加密的密钥是不被别人知道的。遗憾的是，公钥也可能是不正确的，所以需要数字证书认证机构（CA）颁发的公钥证书。 具体过程： =&gt;服务器把公钥登录至数字证书认证机构 =&gt;数字证书认证机构向公钥写上数字签名并颁发公钥证书 =&gt;客户端拿到公钥证书，里面有公钥和数字证书认证机构的数字签名，这样就证明了公钥的真实性 =&gt;客户端使用公钥对报文加密后发送 =&gt;服务器使用私钥解密报文，自此SSL认证结束，公钥可信 =&gt;开始混合加密，先用公钥生成对称加密的密钥，然后服务器用私钥解密出对称加密的密钥，二者开始对称加密会话。</li></ol><h3 id="_1-1-6-tcp" tabindex="-1">1.1.6 tcp <a class="header-anchor" href="#_1-1-6-tcp" aria-label="Permalink to &quot;1.1.6 tcp&quot;">​</a></h3><ol><li><p>三次握手</p><p>每个⽅向都需要⼀个 FIN 和⼀个 ACK</p><p>为了确认对方的发送和接收能力，要进行三次握手。三次握手的主要流程是：</p><table><thead><tr><th style="text-align:center;">number</th><th>who</th><th>do what</th></tr></thead><tbody><tr><td style="text-align:center;">1</td><td>client</td><td>给server发一个SYN为1的报文 | client处于SYN-SENT状态</td></tr><tr><td style="text-align:center;">2</td><td>server</td><td>给client返回一个SYN和ACK(client的ISN+1) | server 处于SYN-RCVD状态</td></tr><tr><td style="text-align:center;">3</td><td>client</td><td>给server返回一个ACK(server的ISN+1) | ESTABLISHED</td></tr></tbody></table><p>此时客户端处于ESTABLISHED状态。服务端收到ACK报文后，也处于ESTABLISHED状态，此时双方建立起了连接。</p></li><li><p>四次挥手</p><p>每个⽅向都需要⼀个 FIN 和⼀个 ACK</p></li></ol><table><thead><tr><th style="text-align:center;">number</th><th>who</th><th>do what</th></tr></thead><tbody><tr><td style="text-align:center;">1</td><td>client</td><td>给server发一个FIN为1的报文 | client 进入 FIN_WAIT_1</td></tr><tr><td style="text-align:center;">2</td><td>server</td><td>给client返回一个ACK | server进⼊CLOSED_WAIT 状态</td></tr><tr><td style="text-align:center;">3</td><td>client</td><td>收到ACK后，client进入FIN_WAIT_2 状态 | server处理完后，发送Fin | server进入 LAST_ACK状态 （主要是这里的等待使得挥手的次数多了一次）</td></tr><tr><td style="text-align:center;">4</td><td>server</td><td>收到Fin报文后，回一个ACK | client进入TIME_WAIT状态 | 受到ACK后，server和client经过2MSL后进入CLOSED状态</td></tr></tbody></table><ol><li><p>因为TCP的半关闭性，为了终止一个连接，要经过四次挥手，要发送四个包。具体流程是：</p><p>客户端发送一个FIN报文，报文中指定一个序列号，此时客户端处于FIN_WAIT1状态，主动关闭TCP连接，等待服务端的确认=&gt;服务端收到FIN后，发送ACK报文，把客户端的序号值+1作为ACK报文的序列号值，表明收到客户端的报文，此时服务端处于CLOSE_WAIT状态，此时TCP处于半关闭状态，客户端到服务端的连接释放。客户端收到服务端确认后，进入FIN_WAIT2状态，等待服务端发来的连接释放的报文段=&gt;如果服务端也想断开连接了，和之前客户端一样，先发FIN报文并指定一个序列号，此时服务端处于LAST_ACK状态，等待客户端确认=&gt;客户端收到FIN之后，一样回应一个ACK报文，即把服务端的序列号+1作为ACK，此时客户端处于TIME_WAIT状态。需要过一阵子（2MSL：两倍的报文段最大生存时间）来确保服务端收到ACK报文后进入CLOSED状态，服务端收到ACK报文后就处于关闭连接了，处于CLOSED状态。</p></li><li><p>为什么需要等待2MSL时间？ 不等待的话，如果发送的ACK报文没被接收到，那么处于LAST_ACK的服务端因为超时没收到ACK报文而重发FIN报文，这时候客户端还要等着重发ACK报文。</p></li><li><p>tcp快速重传 当有报文段丢失时，会有1个正常的ACK和3个重复的ACK，从而定位是哪个报文段丢失，于是重发该报文段，这样就不需要等待超时重传定时器溢出了</p></li><li><p>tcp拥塞控制原理 tcp维护了拥塞窗口和慢启动阈值两个状态。在开始传输时，三次握手后确定各自接收窗口大小，然后初始化各自的拥塞窗口，接着没经过一轮RTT（收发时延），拥塞窗口大小翻倍直至慢启动阈值。如果丢包了，接收端会重复发送ACK让发送端意识到丢包了，就会马上重传，也可以在报文首部加入SACK属性标志那些包到了，然后重传没到的包。发送端发现丢包后，觉得网络进入拥塞状态了，会进入快速恢复阶段：将拥塞阈值降低为拥塞窗口的一半，然后拥塞窗口变成拥塞阈值大小，接着拥塞窗口再线性增加以适应网络状况。</p></li><li><p>tcp四种定时器 重传定时器：报文段丢失时会快速重传 坚持定时器：解决零窗口大小可能导致的dead锁问题 保活定时器：解决通信双方长时间无数据传输的问题 2MSL定时器：确保有足够的时间让对端收到ACK报文，否则会重发FIN报文。</p></li><li><p>tcp滑动窗口： TCP需要把发送的数据放到发送缓存区，将接受的数据放到接收缓存区，对缓存区的流量控制，这个过程需要在发送端维护一个发送窗口，在接收端维持一个接收窗口。TCP滑动窗口分为发送窗口和接收窗口。</p></li><li><p>tcp可靠性如何保证的？使用udp如何做到可靠传输？ 确认机制、重传机制、滑动窗口。如果传输层采用udp，可以在应用层上实现tcp在传输层传输的方式</p></li><li><p>tcp和udp区别 tcp是面向连接的，经过三次握手建立连接。udp面向报文，没有连接属性，不需要握手直接传输数据，所以快一些，但是不稳定，常常在直播和语音通话中采用udp传输</p><p>相⽐ UDP 多了很多特性，⽐如流量控制、超时重传、拥塞控制等</p></li></ol><h2 id="_1-2-快问快答" tabindex="-1">1.2 快问快答 <a class="header-anchor" href="#_1-2-快问快答" aria-label="Permalink to &quot;1.2 快问快答&quot;">​</a></h2><h3 id="_1-2-1-http-https-gzip" tabindex="-1">1.2.1 HTTP | HTTPS | gzip <a class="header-anchor" href="#_1-2-1-http-https-gzip" aria-label="Permalink to &quot;1.2.1 HTTP | HTTPS | gzip&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">0</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">报文：http通信的基本单位，由 报文首部 </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> 空行 </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> 报文实体 组成</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">(如果问tcp数据流的格式实际上就是再问这一个)</span></span>
<span class="line"><span style="color:#A6ACCD;">报文类型之间主要是报文首部不同</span></span>
<span class="line"><span style="color:#A6ACCD;">请求报文头部（起始行）：</span><span style="color:#F78C6C;">1.</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">方法</span><span style="color:#A6ACCD;">(POST</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">GET) </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> 2</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">URL</span><span style="color:#A6ACCD;">(api</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">web</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">wbbr) </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> 3</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">http版本</span><span style="color:#A6ACCD;">(http2)</span></span>
<span class="line"><span style="color:#A6ACCD;">响应报文头部：</span><span style="color:#82AAFF;">http版本</span><span style="color:#A6ACCD;">(http首部字段)</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> 状态码（</span><span style="color:#F78C6C;">200</span><span style="color:#A6ACCD;">）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">后面的都叫做实体了</span></span>
<span class="line"><span style="color:#A6ACCD;">基本结构是：</span><span style="color:#FFCB6B;">key</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> value</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">首部字段类型</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">0.1</span><span style="color:#A6ACCD;"> 通用字段</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">0.1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">1</span><span style="color:#FFCB6B;">Connection</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">Keep</span><span style="color:#89DDFF;">-</span><span style="color:#82AAFF;">Alive</span><span style="color:#A6ACCD;">(1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">1之后是默认打开，1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">1之前是close)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">0.1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">2cache</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">control</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">max</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">age</span><span style="color:#89DDFF;">:</span><span style="color:#F78C6C;">200000000</span><span style="color:#A6ACCD;">   </span><span style="color:#676E95;font-style:italic;">//强缓存</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">0.1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">3Date： 包装报文的事件</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">0.1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">4</span><span style="color:#FFCB6B;">upgrade</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">检测http能不能用更高的协议通信</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">upgrade</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">0.1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">5pragma：http1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">1的一六字段是http1的向后兼容 只有一种字段 no</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">cache</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">0.2</span><span style="color:#A6ACCD;"> 请求首部</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">0.2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">1accept</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">encoding</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">accept</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">language</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">Encoding</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">0.2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">2if</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">Match</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">跟etag字段配合达成协商缓存的作用</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">0.2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">3if</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">modified</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">since：和last</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">modified结婚何以协商缓存</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">0.2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">4range：断点续传</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">0.3</span><span style="color:#A6ACCD;"> 响应首部</span></span>
<span class="line"><span style="color:#A6ACCD;">allow</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">access</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">control</span></span>
<span class="line"><span style="color:#A6ACCD;">content</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">Encoding</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">xss</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">protection</span></span>
<span class="line"><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">frame</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">options</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">0.4</span><span style="color:#A6ACCD;"> 特别说明内容编码 也就是 content</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">Encoding   accept</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">encoding。</span><span style="color:#82AAFF;">可以对内容</span><span style="color:#A6ACCD;">(body)进行压缩。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">gzip：实体采用GUN zip 编码</span></span>
<span class="line"><span style="color:#FFCB6B;">brotli</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">一种比Gzip压缩率更高的算法，编码代号为br</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">只在https生效</span></span>
<span class="line"><span style="color:#A6ACCD;">compress：实体采用Unix的文件压缩程序</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">gzip压缩是在一个文本文件中找出类似的字符串， 并临时替换他们，使整个文件变小。这种形式的压缩对Web来说非常适合， 因为HTML和CSS文件通常包含大量的重复的字符串，例如空格，标签。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">实例：</span></span>
<span class="line"><span style="color:#F78C6C;">0.4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">1client 发送带有Accept</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">Encoding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> gzip的请求</span></span>
<span class="line"><span style="color:#F78C6C;">0.4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">2server通过gzip内容编码器发送回去</span></span>
<span class="line"><span style="color:#F78C6C;">0.4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">3client根据Content</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">Encoding</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> gzip来对请求进行解码，这里应该也有一个gzip内容解码器，然后得到原始的响应。</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">https是啥？超⽂本传输协议。是⼀个在计算机世界⾥专⻔在「两点」之间「传输」⽂字、图⽚、⾳频、视频等「超⽂本」数据的「约定和规范」</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">那「HTTP 是⽤于从互联⽹服务器传输超⽂本到本地浏览器的协议 ，这种说法正确吗？</span></span>
<span class="line"><span style="color:#A6ACCD;">这种说法是不正确的。因为也可以是「服务器</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">服务器」，所以采⽤两点之间的描述会更准确。</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">常见http状态码？</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">101</span><span style="color:#A6ACCD;"> 升级成websocket</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">204相比于200没有响应体 206是断点续传的成功态</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">301是永久重定向，302是临时重定向（资源还在，带式要用新的url访问）304是资源未修改。</span><span style="color:#89DDFF;">---</span><span style="color:#A6ACCD;">400和500都是笼统的错误。 401是Unauthorized 403是forbidden访问资源（权限）。404是Not Found 501是功能不支持（Not Implemented）  502是网关错误 Bad GateWay 503是本店今天不开张 Service Unavailable</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1xx是中间件状态，3xx是重定向，4xx是客户端错误，5xx是服务器错误</span><span style="color:#89DDFF;">.</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">你知道的 HTTP 的优点有哪些，怎么体现的？</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">1</span><span style="color:#82AAFF;">简单</span><span style="color:#A6ACCD;">(基本的报⽂格式就是 header </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> body ，头部信息也是 key</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">value)、</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">2</span><span style="color:#82AAFF;">灵活和易于扩展</span><span style="color:#A6ACCD;">(header可以随便加)</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">HTTPS 也就是在 HTTP 与 TCP 层之间增加SSL</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">TLS 安全传输层，HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;"> 甚⾄把 TCP 层换成了基于 UDP 的QUIC</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">3应⽤⼴泛和跨平台</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">那HTTP的缺点呢？ ⽆状态双刃剑（shop会⾮常麻烦），明⽂传输双刃剑（信息安全）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">6</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">那你再说下 HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> 的性能如何？</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">6.1</span><span style="color:#A6ACCD;"> ⻓连接</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">6.2</span><span style="color:#A6ACCD;"> 管道⽹络传输（即可在同⼀个 TCP 连接⾥⾯，客户端可以发起多个请求），队头阻塞（上班堵车）。管道机制则是允许浏览器同时发出 A 请求和 B 请求。但是服务器还是按照顺序，先回应 A 请求，完成后再回应 B 请求。要是前⾯的回应特别慢，后⾯就会有许多请求排队等着。这称为「队头堵塞」。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">总结性能一般般。相对于http2和http3就是为了解决他的问题而设计出来的</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">7</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">HTTP 与 HTTPS 有哪些区别？</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">7.1</span><span style="color:#A6ACCD;"> HTTPS 则解决 HTTP 不安全的缺陷，在TCP 和 HTTP ⽹络层之间加⼊了 SSL</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">TLS 安全协议，使得报⽂能够加密传输。（信息加密）</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">7.2</span><span style="color:#A6ACCD;"> HTTP 的端⼝号是 </span><span style="color:#F78C6C;">80</span><span style="color:#A6ACCD;">，HTTPS 的端⼝号是 </span><span style="color:#F78C6C;">443</span><span style="color:#A6ACCD;">。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">7.3</span><span style="color:#A6ACCD;"> HTTPS 协议需要向 CA（证书权威机构）申请数字证书，来保证服务器的身份是可信的（身份证书）</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">7.4</span><span style="color:#A6ACCD;"> HTTP 连接建⽴相对简单， TCP 三次握⼿之后便可进⾏ HTTP 的报⽂传输。⽽ HTTPS 在 TCP 三次握⼿之后，还需进⾏ SSL</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">TLS 的握⼿过程，才可进⼊加密报⽂传输（链接过程）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">8</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">HTTPS 是如何解决上⾯的三个⻛险的？（明文。被篡改。身份）</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">8.1</span><span style="color:#A6ACCD;"> 信息加密：对称加密只使⽤⼀个密钥，⾮对称加密使⽤两个密钥（一个公钥一个私钥，公钥可以任意分发）</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">公钥加密信息，服务器收到密⽂后，⽤⾃⼰的私钥解密</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">8.2</span><span style="color:#A6ACCD;"> 校验机制：防止信息被篡改</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">摘要算法的⽅式来实现完整性，它能够为数据⽣成独⼀⽆⼆的「指纹」</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">8.3</span><span style="color:#A6ACCD;"> 身份证书：将服务器公钥放⼊到数字证书中，解决了冒充的⻛险。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">9</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">HTTPS 是如何建⽴连接的？其间交互了什么（4次）</span></span>
<span class="line"><span style="color:#A6ACCD;">ClientHello  </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">  SeverHello </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> 客户端回应（生成会话密钥） </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">服务器的最后回应</span></span>
<span class="line"><span style="color:#A6ACCD;">0</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">client发送建立连接</span></span>
<span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">server收到ssl连接发送证书，之后发送公钥a。</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">client生成随机数，作为对称加密b密钥。用server的公钥a对b进行加密。得到密钥c（pre master）</span></span>
<span class="line"><span style="color:#A6ACCD;">发送给server。</span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">server用私钥解密。得到pre master之后用这个通信。这个pre master就是对称密钥加解密传输</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">所以说https是结合的</span></span>
<span class="line"><span style="color:#A6ACCD;">1server收到证书  2client用1公钥对随机数加密   3server解密</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">10</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">那上⾯的 HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> 的性能瓶颈，HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> 做了什么优化？</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">10.1</span><span style="color:#A6ACCD;"> 头部压缩：HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> 会压缩头（Header）如果你同时发出多个请求，他们的头是⼀样的或是相似的，那么，协议会帮你消除重复的部分。(HPACK 算法:client和server维护一张头信息表，相同的发送索引)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">10.2</span><span style="color:#A6ACCD;"> 二进制：不像http1纯文本的报文，而是采用二进制。增加了传输效率</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">10.3</span><span style="color:#A6ACCD;"> 多路复⽤：移除了 HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> 中的串⾏请求接收，不需要排队等待，也就不会再出现「队头阻塞」</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">10.4</span><span style="color:#A6ACCD;"> 全双工的通讯：服务器也可以进行发送请求。可以进行服务端的请求发送</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">10.5</span><span style="color:#A6ACCD;"> 优先级 </span></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">11.</span><span style="color:#A6ACCD;"> HTTP </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> 有哪些缺陷？HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;"> 做了哪些优化？</span></span>
<span class="line"><span style="color:#A6ACCD;">HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;"> 主要的问题在于 不能长连接，发送接收都要等待（两边阻塞）</span></span>
<span class="line"><span style="color:#A6ACCD;">HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> 主要的问题在于，管道传输中一个请求阻塞了，队列后面的请求去也被阻塞住了（单边阻塞）</span></span>
<span class="line"><span style="color:#A6ACCD;">HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> 主要的问题在于，多个 HTTP 请求在复⽤⼀个 TCP 连接，一旦丢包，就会触发tcp的重传机制</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">这都是基于 TCP 传输层的问题，所以 HTTP</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;"> 把 HTTP 下层的 TCP 协议改成了 UDP （不阻塞）</span></span></code></pre></div><h3 id="_1-2-2-get-post" tabindex="-1">1.2.2 get post <a class="header-anchor" href="#_1-2-2-get-post" aria-label="Permalink to &quot;1.2.2 get post&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">GET 和 POST ⽅法都是安全和幂等的吗？</span></span>
<span class="line"><span style="color:#A6ACCD;">在 HTTP 协议⾥，所谓的「安全」是指请求⽅法不会「破坏」服务器上的资源。所谓的「幂等」，意思是多次执⾏相同的操作，结果都是「相同」的。那么很明显 GET ⽅法就是安全且幂等的，POST 因为是「新增或提交数据」的操作，会修改服务器上的资源，所以是不安全的，且多次提交数据就会创建多个资源，所以不是幂等的。</span></span>
<span class="line"><span style="color:#F78C6C;">2.</span></span></code></pre></div><h3 id="_1-2-3-tcp-常问" tabindex="-1">1.2.3 tcp 常问 <a class="header-anchor" href="#_1-2-3-tcp-常问" aria-label="Permalink to &quot;1.2.3  tcp 常问&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">TCP</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">IP协议了解吗</span><span style="color:#89DDFF;">?</span><span style="color:#A6ACCD;">说一下层次结构？TCP</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">IP是怎么做到分层的？</span></span>
<span class="line"><span style="color:#A6ACCD;">比osi少了会话层和表示层。 我当时忘了有两个协议OSI七层协议和这玩意</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">为什么需要 TCP 协议？ TCP ⼯作在哪⼀层？可靠性，传输层</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">什么是 TCP ？ 面向连接的（只能一对一），可靠的（使命必达），基于字节流的通信协议（字节组成，无边界</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">就是多大都可以）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">UDP 和 TCP 有什么区别呢？分别的应⽤场景是？</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">4.1</span><span style="color:#A6ACCD;"> 连接：UDP 利⽤ IP 提供⾯向「⽆连接」的通信服务，TCP面向连接的的可靠的</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">4.2</span><span style="color:#A6ACCD;"> 可靠：UDP 到达不可靠</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">4.3</span><span style="color:#A6ACCD;"> 控制：拥塞控制和流ᰁ控制机制，保证数据传输的安全性</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">4.4</span><span style="color:#A6ACCD;"> 传输方式：UDP是包发送</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">分片（网络层分片）   TCP 是流式传输</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">分片（传输层分片）</span></span>
<span class="line"><span style="color:#A6ACCD;">传输层</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">如何在 Linux 系统中查看 TCP 状态？</span></span>
<span class="line"><span style="color:#A6ACCD;">netstat </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">napt</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">6</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">为什么一定要三次握手？不使⽤「两次握⼿」和「四次握⼿」的原因：</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">6.1</span><span style="color:#A6ACCD;"> RFC规范：防止旧的重复连接初始化造成混乱。如果是历史连接（序列号过期或超时），则第三次握⼿发送的报⽂是 RST 报⽂，以此中⽌历史连接 （时间通道）</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">6.2</span><span style="color:#A6ACCD;"> 同步双⽅</span><span style="color:#82AAFF;">初始序列号</span><span style="color:#A6ACCD;">(物理通道)</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">避免资源浪费</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">7</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">什么是 SYN 攻击？如何避免 SYN 攻击？</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">what 假设攻击者短时间伪造不同 IP 地址的 SYN 报⽂，服务端每接收到⼀个 SYN 报⽂，就进⼊ SYN_RCVD 状态，⽆法得到未知 IP 主机的 ACK 应答，久⽽久之就会占满服务端的 SYN 接收队列（未连接队列），使得服务器不能为正常⽤户服务。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">how </span></span>
<span class="line"><span style="color:#A6ACCD;">通过修改 Linux 内核参数，控制队列⼤⼩和当队列满时应做什么处理</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">8</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">初始序列号 ISN 是如何随机产⽣的？</span></span>
<span class="line"><span style="color:#A6ACCD;">ISN </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> M（每隔4s</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">1的计时器。male） </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> F（Hash 算法，根据源 IP、⽬的 IP、源端⼝、⽬的端⼝⽣成⼀个随机数值 female）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">9</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">为什么四次挥手</span></span>
<span class="line"><span style="color:#A6ACCD;">服务端通常需要等待完成数据的发送和处理，所以服务端的 ACK 和 FIN ⼀般都会分开发送，从⽽⽐三次握⼿导致多了⼀次。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">10</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">为什么 TIME_WAIT 等待的时间是 2MSL？</span></span>
<span class="line"><span style="color:#A6ACCD;">MSL 是 Maximum Segment Lifetime，报⽂最⼤⽣存时间，它是任何报⽂在⽹络上存在的最⻓时间，超过这个时间报⽂将被丢弃。（⼀来⼀回）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">11</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">为什么需要 TIME_WAIT 状态</span></span>
<span class="line"><span style="color:#A6ACCD;">主动发起关闭连接的⼀⽅，才会有 TIME</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">WAIT 状态</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">11.1</span><span style="color:#A6ACCD;"> 保证连接正确关闭</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">11.2</span><span style="color:#A6ACCD;"> 防⽌旧连接的数据包</span></span>
<span class="line"><span style="color:#A6ACCD;">此时如果客户端 TIME</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">WAIT过短或没有，则就直接进⼊了 CLOSED 状态了，那么服务端则会⼀直处在 LASE_ACK 状态。</span></span>
<span class="line"><span style="color:#A6ACCD;">当客户端发起建⽴连接的 SYN 请求报⽂后，服务端会发送 RST 报⽂给客户端，连接建⽴的过程就会被终⽌。</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Tcp第三次握手可不可以携带数据？</span></span>
<span class="line"><span style="color:#A6ACCD;">第三次握⼿是可以携带数据的，前两次握⼿是不可以携带数据的</span></span></code></pre></div><h3 id="_1-2-4-tcp-机制" tabindex="-1">1.2.4 tcp 机制 <a class="header-anchor" href="#_1-2-4-tcp-机制" aria-label="Permalink to &quot;1.2.4  tcp 机制&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">重传机制:通过序列号与确认应答</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">设定⼀个定时器，当超过指定的时间后，没有收到对⽅的 ACK 确认应答报⽂，就会重发该数据，也就是我们常说的超时重传。</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">滑动窗口:窗⼝⼤⼩就是指⽆需等待确认应答，⽽可以继续发送数据的最⼤值，窗的实现实际上是操作系统开辟的⼀个缓存空间，发送⽅主机在等到确认应答返回之前，必须在缓冲区中保留已发送的数据。如果按期收到确认应答，此时数据就可以从缓存区清除。</span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">流量控制:通信双⽅各声明⼀个缓存⼤⼩的窗口</span></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">拥塞控制</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">就是控制⾃⼰，也即控制发送的速度。不能改变世界，就改变⾃⼰嘛</span></span></code></pre></div><h3 id="_1-2-5-其他知识点" tabindex="-1">1.2.5 其他知识点 <a class="header-anchor" href="#_1-2-5-其他知识点" aria-label="Permalink to &quot;1.2.5 其他知识点&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">HTTP长连接的缺点</span><span style="color:#89DDFF;">?</span></span>
<span class="line"><span style="color:#A6ACCD;">可能会损害服务器的整体性能，如apache的长连接时间的长短，直接影响到服务器的并发数。</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">HTTP2是如何解决“队头阻塞”的问题？</span></span>
<span class="line"><span style="color:#A6ACCD;">HTTP2 并没有解决 TCP 的队首阻塞问题，它仅仅是通过多路复用解决了以前 HTTP1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">1管线化请求时的队首阻塞。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">HTTP2 是通过分帧并且给每个帧打上流的 ID 去避免依次响应的问题，对方接收到帧之后根据 ID 拼接出流，这样就可以做到乱序响应从而避免请求时的队首阻塞问题</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">TCP 的阻塞问题是因为传输阶段可能会丢包，一旦丢包就会等待重新发包，阻塞后续传输</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-7b3ebfe1>Last updated: <time datetime="2023-05-22T11:23:47.000Z" data-v-7b3ebfe1></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><a class="pager-link prev" href="/front-base-know-blog/know/know/8bug" data-v-face870a><span class="desc" data-v-face870a>Previous page</span><span class="title" data-v-face870a>BUG</span></a></div><div class="has-prev pager" data-v-face870a><a class="pager-link next" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/1vue" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>vue</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-f0b011de data-v-2f86ebd2><div class="container" data-v-2f86ebd2><p class="message" data-v-2f86ebd2>MIT License.</p><p class="copyright" data-v-2f86ebd2>Copyright © 2023～present Electrolux</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"95f8ca9d\",\"java_base.md\":\"edc53698\",\"guide_quick start.md\":\"51bdad5b\",\"java_java.md\":\"07f7958b\",\"know_know_11.web3.md\":\"930011fd\",\"supper_工具基础_16.代码高亮.md\":\"775a71ba\",\"supper_工具基础_6codepen.md\":\"46f8bbbd\",\"supper_工具基础_5ps切图.md\":\"dc662c1f\",\"supper_前端库_1vueify.md\":\"04b61666\",\"supper_工程化_7性能优化和调试.md\":\"981a8dd6\",\"know_know_8adb.md\":\"ccc6c2e0\",\"supper_工具基础_1sourcetree的使用.md\":\"d71319d4\",\"know_know_10.项目具体代码优化.md\":\"f55add09\",\"supper_工程化_4docker 部署实操.md\":\"2e571e48\",\"know_know_1html.md\":\"19aaf16a\",\"supper_工具基础_8graphql.md\":\"198ddc72\",\"supper_工程化_6gitee流水线.md\":\"93a4c7ff\",\"know_know_5javascript-es6.md\":\"4c2cf8f7\",\"know_框架_16.echart.md\":\"0ada5f86\",\"know_know_3javascript基础.md\":\"900d378b\",\"know_优化_3算法.md\":\"8f5141e6\",\"know_框架_14webgl基础.md\":\"00a11e3e\",\"python_flask.md\":\"c8a0482c\",\"supper_功能_9监控停留时间.md\":\"2df00eaf\",\"know_框架_7python.md\":\"7d7eed5d\",\"supper_工程化_1工程化基础.md\":\"d48b3bbc\",\"know_优化_9wasm.md\":\"8d5d5bf6\",\"supper_工具基础_3github图床.md\":\"7073aa94\",\"supper_功能_8前端上传下载.md\":\"99e30d2a\",\"know_框架_13electron.md\":\"d3e93be3\",\"supper_前端库_3js-cookie.md\":\"91624dd6\",\"supper_工具基础_9快速mock.md\":\"215a0e2b\",\"know_know_4javascript代码输出题.md\":\"7348a30a\",\"python_base.md\":\"7acd6bad\",\"supper_功能_5微信支付.md\":\"d09d8b08\",\"know_框架_12threejs.md\":\"b6fbcf93\",\"know_框架_7tensorflow.md\":\"2ccc8062\",\"supper_工具基础_7icon实操.md\":\"f1512b60\",\"supper_工具基础_2用gitee连接ssh_linux服务器.md\":\"1bc61e8d\",\"supper_3d数字孪生_3ar的使用.md\":\"5db75881\",\"python_flask_开始.md\":\"54460465\",\"know_know_12.运维.md\":\"b8bd4e62\",\"supper_工具基础_14.vscode.md\":\"f106db65\",\"know_优化_12.pwa.md\":\"8327b1db\",\"know_know_6ts.md\":\"49f90aab\",\"supper_supper_4ui设计.md\":\"53988b67\",\"supper_功能_10数据大屏自适应.md\":\"7c40b558\",\"supper_工程化_3关于一些自动化脚本.md\":\"38029566\",\"know_know_4javascript手写题.md\":\"50a7a32f\",\"supper_工具基础_13mac的使用.md\":\"56de5b9c\",\"know_know_2javascript基础.md\":\"3d42c0ee\",\"supper_功能_7深度学习实操.md\":\"f6b94234\",\"know_优化_5npm_组件库构造.md\":\"67d2b67c\",\"know_计算机基础_1计算机网络.md\":\"5d905f95\",\"supper_3d数字孪生_2three世泊大屏实操.md\":\"beb9c2f8\",\"supper_功能_11拖拽元素.md\":\"cf7bf8a0\",\"python_llm.md\":\"e97febae\",\"know_know_7css.md\":\"06a3d117\",\"supper_supper_2实用算法.md\":\"e4baf1d9\",\"supper_工具基础_4git的基本使用.md\":\"c5629b74\",\"supper_功能_12vue-element-admin.md\":\"20c09558\",\"supper_工程化_5给包打补丁.md\":\"5103e073\",\"know_框架_11逆向数据crawl.md\":\"ae5ee06c\",\"supper_功能_4ffmpeg-rmtp监控.md\":\"39152e9b\",\"project_图表绘制.md\":\"dd437537\",\"supper_工具基础_12nvm.md\":\"329d446d\",\"know_框架_8mediapipe.md\":\"23fc89f2\",\"know_优化_6webrtc.md\":\"21589281\",\"know_优化_1性能优化和安全.md\":\"270924f0\",\"supper_功能_1小功能汇总.md\":\"5663f27a\",\"know_框架_4微前端.md\":\"76663f96\",\"supper_supper_1代码优化.md\":\"6126a362\",\"know_框架_10aframe.md\":\"7daf1aa1\",\"supper_supper_3性能优化.md\":\"86672f22\",\"know_优化_11.webcomponent.md\":\"94e3cf8a\",\"supper_功能_2小功能汇总.md\":\"692f88ef\",\"know_框架_1vue.md\":\"a9100a41\",\"supper_个人封装_1个人发包模板.md\":\"6b48d3d3\",\"supper_工具基础_10脚手架.md\":\"534226fa\",\"supper_工具基础_11figma.md\":\"ffebb5c1\",\"know_框架_15threejs.md\":\"85dc8e0c\",\"supper_功能_3小功能汇总.md\":\"9765dc9a\",\"supper_功能_6v-model组件封装.md\":\"9df7d5cf\",\"supper_3d数字孪生_5threejs的性能优化.md\":\"eafc4b19\",\"know_框架_8ffmpeg.md\":\"56543d8b\",\"supper_3d数字孪生_1webgl基础.md\":\"9602a381\",\"know_框架_4three数据大屏.md\":\"9b71f7c5\",\"know_框架_3ssr.md\":\"f78ee50f\",\"supper_前端库_2anime.js.md\":\"62c0fbd1\",\"know_框架_2react.md\":\"3ef491f2\",\"know_框架_5vue3.md\":\"a9430a8a\",\"know_框架_17webpack.md\":\"d7f6f200\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Electrolux_blog\",\"description\":\"hello world\",\"base\":\"/front-base-know-blog/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"outlineTitle\":\"目录\",\"i18nRouting\":true,\"logo\":\"https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端基础\",\"link\":\"/know/know/1html\"},{\"text\":\"前端工程化\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"Python\",\"link\":\"/python/flask.md\"},{\"text\":\"Java\",\"link\":\"/java/java.md\"},{\"text\":\"项目\",\"link\":\"/project/javadump分析.md\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/Electrolux\"}],\"footer\":{\"message\":\"MIT License.\",\"copyright\":\"Copyright © 2023～present Electrolux\"},\"sidebar\":{\"/know/\":[{\"text\":\"前端基础\",\"collapsed\":false,\"items\":[{\"text\":\"html(浏览器)\",\"link\":\"/know/know/1html\"},{\"text\":\"js基础(1)\",\"link\":\"/know/know/2javascript基础\"},{\"text\":\"js基础(2)\",\"link\":\"/know/know/3javascript基础\"},{\"text\":\"js基础(3) | 手写题\",\"link\":\"/know/know/4javascript手写题\"},{\"text\":\"js基础(3) | 代码输出\",\"link\":\"/know/know/4javascript代码输出题\"},{\"text\":\"js基础(4) | es6\",\"link\":\"/know/know/5javascript-es6\"},{\"text\":\"js基础(5)\",\"link\":\"/know/know/9javascript基础\"},{\"text\":\"TypeScript\",\"link\":\"/know/know/6ts\"},{\"text\":\"CSS\",\"link\":\"/know/know/7css\"},{\"text\":\"BUG\",\"link\":\"/know/know/8bug\"}]},{\"text\":\"计算机基础\",\"collapsed\":false,\"items\":[{\"text\":\"计算机网络\",\"link\":\"/know/计算机基础/1计算机网络\"}]},{\"text\":\"框架 | 工具\",\"collapsed\":false,\"items\":[{\"text\":\"vue\",\"link\":\"/know/框架/1vue\"},{\"text\":\"react\",\"link\":\"/know/框架/2react\"},{\"text\":\"ssr\",\"link\":\"/know/框架/3ssr\"},{\"text\":\"微前端\",\"link\":\"/know/框架/4微前端\"},{\"text\":\"vue3\",\"link\":\"/know/框架/5vue3\"},{\"text\":\"nginx\",\"link\":\"/know/框架/6nginx\"},{\"text\":\"python\",\"link\":\"/know/框架/7python\"},{\"text\":\"ffmpeg\",\"link\":\"/know/框架/8ffmpeg\"},{\"text\":\"tensorFlow\",\"link\":\"/know/优化/7tensorFlow\"},{\"text\":\"mediapipe\",\"link\":\"/know/优化/8mediapipe\"},{\"text\":\"aframe\",\"link\":\"/know/框架/10aframe\"},{\"text\":\"逆向数据crawl\",\"link\":\"/know/框架/11逆向数据crawl\"},{\"text\":\"threejs\",\"link\":\"/know/框架/12threejs\"},{\"text\":\"13electron\",\"link\":\"/know/框架/13electron\"},{\"text\":\"13electron\",\"link\":\"/know/框架/17webpack\"}]},{\"text\":\"优化 | 工程\",\"collapsed\":false,\"items\":[{\"text\":\"性能优化和安全\",\"link\":\"/know/优化/1性能优化和安全\"},{\"text\":\"算法\",\"link\":\"/know/优化/3算法\"},{\"text\":\"性能优化\",\"link\":\"/know/优化/4性能优化\"},{\"text\":\"组件库构造\",\"link\":\"/know/优化/5npm,组件库构造\"},{\"text\":\"webrtc\",\"link\":\"/know/优化/6webrtc\"},{\"text\":\"wasm\",\"link\":\"/know/优化/9.wasm\"},{\"text\":\"webcomponent\",\"link\":\"/know/优化/11.webcomponent\"},{\"text\":\"pwa\",\"link\":\"/know/优化/12.pwa\"}]}],\"/java/\":[{\"text\":\"java\",\"collapsed\":false,\"items\":[{\"text\":\"jvm\",\"link\":\"/java/java\"},{\"text\":\"springboot\",\"link\":\"/java/base\"}]}],\"/python/\":[{\"text\":\"python 基础\",\"collapsed\":false,\"items\":[{\"text\":\"服务器\",\"link\":\"/python/flask\"}]}],\"/project/\":[{\"text\":\"项目文档\",\"collapsed\":false,\"items\":[{\"text\":\"java dump\",\"link\":\"/project/图表绘制\"}]}],\"/supper/\":[{\"text\":\"代码高级\",\"collapsed\":false,\"items\":[{\"text\":\"代码优化 | 设计模式\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"设计模式与js\",\"link\":\"/supper/supper/2实用算法\"},{\"text\":\"性能优化\",\"link\":\"/supper/supper/3性能优化\"},{\"text\":\"UI设计\",\"link\":\"/supper/supper/4UI设计\"}]},{\"text\":\"工程化\",\"collapsed\":false,\"items\":[{\"text\":\"工程化基础\",\"link\":\"/supper/工程化/1工程化基础\"},{\"text\":\"webpack的配置\",\"link\":\"/supper/工程化/2webpack的配置\"},{\"text\":\"自动化脚本\",\"link\":\"/supper/工程化/3关于一些自动化脚本\"},{\"text\":\"docker 部署实操\",\"link\":\"/supper/工程化/4docker 部署实操\"},{\"text\":\"patch-package\",\"link\":\"/supper/工程化/5给包打补丁\"},{\"text\":\"gitee流水线\",\"link\":\"/supper/工程化/6gitee流水线\"}]},{\"text\":\"工具基础\",\"collapsed\":false,\"items\":[{\"text\":\"Sourcetree的使用\",\"link\":\"/supper/工具基础/1Sourcetree的使用\"},{\"text\":\"用gitee连接ssh,linux服务器\",\"link\":\"/supper/工具基础/2用gitee连接ssh,linux服务器\"},{\"text\":\"github图床\",\"link\":\"/supper/工具基础/3github图床\"},{\"text\":\"git的基本使用\",\"link\":\"/supper/工具基础/4git的基本使用\"},{\"text\":\"ps切图\",\"link\":\"/supper/工具基础/5ps切图\"},{\"text\":\"codepen\",\"link\":\"/supper/工具基础/6codepen\"},{\"text\":\"icon实操 | svg原理\",\"link\":\"/supper/工具基础/7Icon实操\"},{\"text\":\"GraphQl\",\"link\":\"/supper/工具基础/8GraphQl\"},{\"text\":\"快速mock\",\"link\":\"/supper/工具基础/9快速mock\"},{\"text\":\"脚手架\",\"link\":\"/supper/工具基础/10脚手架\"},{\"text\":\"figma\",\"link\":\"/supper/工具基础/11figma\"},{\"text\":\"nvm\",\"link\":\"/supper/工具基础/12nvm\"},{\"text\":\"苹果\",\"link\":\"/supper/工具基础/13mac的使用\"}]},{\"text\":\"个人封装\",\"collapsed\":false,\"items\":[{\"text\":\"个人封装\",\"link\":\"/supper/个人封装/1个人发包模板\"}]},{\"text\":\"前端库\",\"collapsed\":false,\"items\":[{\"text\":\"vueify\",\"link\":\"/supper/前端库/1vueify\"},{\"text\":\"anime.js\",\"link\":\"/supper/前端库/2anime.js\"},{\"text\":\"js-cookie\",\"link\":\"/supper/前端库/3js-cookie\"}]},{\"text\":\"功能\",\"collapsed\":false,\"items\":[{\"text\":\"小功能汇总1\",\"link\":\"/supper/功能/1小功能汇总\"},{\"text\":\"小功能汇总2\",\"link\":\"/supper/功能/2小功能汇总\"},{\"text\":\"小功能汇总3\",\"link\":\"/supper/功能/3小功能汇总\"},{\"text\":\"ffmpeg-rmtp监控\",\"link\":\"/supper/功能/4ffmpeg-rmtp监控\"},{\"text\":\"微信支付\",\"link\":\"/supper/功能/5微信支付\"},{\"text\":\"v-model组件封装\",\"link\":\"/supper/功能/6v-model组件封装\"},{\"text\":\"深度学习实操\",\"link\":\"/supper/功能/7深度学习实操\"},{\"text\":\"前端上传下载\",\"link\":\"/supper/功能/8前端上传下载\"},{\"text\":\"监控停留时间\",\"link\":\"/supper/功能/9监控停留时间\"},{\"text\":\"数据大屏自适应\",\"link\":\"/supper/功能/10数据大屏自适应\"},{\"text\":\"拖拽元素\",\"link\":\"/supper/功能/11拖拽元素\"},{\"text\":\"vue-element-admin\",\"link\":\"/supper/功能/12vue-element-admin\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}")</script>
    
  </body>
</html>